<template>
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="140px" @submit.prevent>
    <el-form-item :label="t('scxAmount.fields.phd1st')" prop="phd1st">
      <el-input-number
        v-model="formData.phd1st"
        :placeholder="t('common.inputTextPlaceholder') + t('scxAmount.fields.phd1st')"
        class="better-number-input !w-1/1"
        :controls="false"
      />
    </el-form-item>
    <el-form-item :label="t('scxAmount.fields.phd2nd')" prop="phd2nd">
      <el-input-number
        v-model="formData.phd2nd"
        :placeholder="t('common.inputTextPlaceholder') + t('scxAmount.fields.phd2nd')"
        class="better-number-input !w-1/1"
        :controls="false"
      />
    </el-form-item>
    <el-form-item :label="t('scxAmount.fields.phd3rd')" prop="phd3rd">
      <el-input-number
        v-model="formData.phd3rd"
        :placeholder="t('common.inputTextPlaceholder') + t('scxAmount.fields.phd3rd')"
        class="better-number-input !w-1/1"
        :controls="false"
      />
    </el-form-item>
    <el-form-item :label="t('scxAmount.fields.master1st')" prop="master1st">
      <el-input-number
        v-model="formData.master1st"
        :placeholder="t('common.inputTextPlaceholder') + t('scxAmount.fields.master1st')"
        class="better-number-input !w-1/1"
        :controls="false"
      />
    </el-form-item>
    <el-form-item :label="t('scxAmount.fields.master2nd')" prop="master2nd">
      <el-input-number
        v-model="formData.master2nd"
        :placeholder="t('common.inputTextPlaceholder') + t('scxAmount.fields.master2nd')"
        class="better-number-input !w-1/1"
        :controls="false"
      />
    </el-form-item>
    <el-form-item :label="t('scxAmount.fields.initialRules')" prop="initialRules">
      <Editor v-model="formData.initialRules" height="300px" />
    </el-form-item>
    <el-form-item :label="t('scxAmount.fields.finalRules')" prop="finalRules">
      <Editor v-model="formData.finalRules" height="300px" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { ref, reactive } from 'vue'
import { ScxAmountApi, ScxAmountVO } from '@/api/awards/scxamount'
import { FormRules } from 'element-plus'

defineOptions({ name: 'InstanceScxRulesSetting' })

const { t } = useI18n()

const emit = defineEmits(['update:modelValue', 'success'])

const formData = ref<any>({
  id: undefined,
  phd1st: undefined,
  phd2nd: undefined,
  phd3rd: undefined,
  master1st: undefined,
  master2nd: undefined,
  isTemplate: false,
  awardId: undefined,
  templateId: undefined,
  initialRules: undefined,
  finalRules: undefined,
  remark: undefined
})

const rules = reactive<FormRules>({
  phd1st: [
    {
      required: true,
      message: t('common.inputTextPlaceholder') + t('scxAmount.fields.phd1st'),
      trigger: 'change'
    }
  ],
  phd2nd: [
    {
      required: true,
      message: t('common.inputTextPlaceholder') + t('scxAmount.fields.phd2nd'),
      trigger: 'change'
    }
  ],
  phd3rd: [
    {
      required: true,
      message: t('common.inputTextPlaceholder') + t('scxAmount.fields.phd3rd'),
      trigger: 'change'
    }
  ],
  master1st: [
    {
      required: true,
      message: t('common.inputTextPlaceholder') + t('scxAmount.fields.master1st'),
      trigger: 'change'
    }
  ],
  master2nd: [
    {
      required: true,
      message: t('common.inputTextPlaceholder') + t('scxAmount.fields.master2nd'),
      trigger: 'change'
    }
  ],
  initialRules: [
    {
      required: true,
      message: t('common.inputTextPlaceholder') + t('scxAmount.fields.initialRules'),
      trigger: 'change'
    }
  ],
  finalRules: [
    {
      required: true,
      message: t('common.inputTextPlaceholder') + t('scxAmount.fields.finalRules'),
      trigger: 'change'
    }
  ]
})

const formRef = ref()

// 获取scx模板数据
const fetchDataByAward = async (instanceId: string) => {
  try {
    // scx的 需要读取amount表
    formData.value = (await ScxAmountApi.getScxAmountByAwardsId(instanceId)) ?? {}
  } catch (error) {
    console.error('Failed to fetch data:', error)
  }
}

// 获取scx模板数据
const fetchDataByTemplate = async (templateId: string) => {
  try {
    // 选择了scx 加载scx的默认配置
    formData.value = (await ScxAmountApi.getScxAmount(templateId)) ?? {}
    formData.value.id = undefined
    formData.value.isTemplate = false
    formData.value.awardId = undefined
    formData.value.templateId = templateId
  } catch (error) {
    console.error('Failed to fetch data:', error)
  }
}

// 提交数据
const submit = async (templateId: string, instanceId: string) => {
  await formRef.value.validate()
  const dataScx = formData.value as unknown as ScxAmountVO
  dataScx.awardId = instanceId
  dataScx.templateId = templateId
  if (dataScx.id) {
    await ScxAmountApi.updateScxAmount(dataScx)
  } else {
    dataScx.id = templateId
    await ScxAmountApi.createScxAmount(dataScx)
  }
}

const resetForm = () => {
  formData.value = {
    id: undefined,
    phd1st: undefined,
    phd2nd: undefined,
    phd3rd: undefined,
    master1st: undefined,
    master2nd: undefined,
    isTemplate: true,
    awardId: undefined,
    templateId: undefined,
    initialRules: undefined,
    finalRules: undefined,
    remark: undefined
  }
  formRef.value?.resetFields()
}

// 暴露方法
defineExpose({
  fetchDataByAward,
  fetchDataByTemplate,
  submit,
  validate: () => formRef.value.validate(),
  resetForm
})
</script>
